<div class="app" [ngClass]="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':asideFolded}">
  <div class="app-header navbar">
    <div class="navbar-header {{app.settings.navbarHeaderColor}}">
      <button class="pull-right visible-xs dk" data-target=".navbar-collapse">
        <i class="glyphicon glyphicon-cog"></i>
      </button>
      <button class="pull-right visible-xs"  data-target=".app-aside">
        <i class="glyphicon glyphicon-align-justify"></i>
      </button>

      <a class="navbar-brand text-lt" >

        <img src="../../assets/img/logo.png" alt="." class="hide">
        <span class="hidden-folded m-l-xs">{{account?.short_name}}</span>
      </a>

    </div>

    <div class="collapse navbar-collapse box-shadow {{app.settings.navbarCollapseColor}}">

      <div class="nav navbar-nav m-l-sm hidden-xs">
        <a class="btn no-shadow navbar-btn" (click)="asideFolded = !asideFolded">
          <i class="fa {{asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
        </a>

      </div>

      <ul class="nav navbar-nav navbar-right"> 
        <li class="dropdown" [class.open]="drop.info" (click)="drop.info=true" (mouseleave)="drop.info=false">
          <a class="dropdown-toggle clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="http://101.37.24.73:8080/fileupload/mfile?file_name={{account?.facing_img}}" alt="..." style="height:40px;width:128px">
                <i class="on md b-white bottom"></i>
              </span>
            <span class="hidden-sm hidden-md">{{account?.username}}</span> <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight w">

            <li>
              <a class="text-center" [routerLink]="['accountinfo/userinfo']">账户信息</a>
            </li>

            <li class="divider"></li>
            <li>
              <a class="text-center" (click)="logout()">登出</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="app-aside hidden-xs {{app.settings.asideColor}}">
    <div class="aside-wrap">
      <div class="navi-wrap">
        <nav class="navi" >
          <ul class="nav">

            <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
              <span >导航菜单</span>
            </li>

            <!--概览-->
            <li routerLinkActive="active">
              <a [routerLink]="['dashboard']" (click)="selectMenu(1,0)">
                <i class="fa fa-dashboard"></i>
                <span>概览</span>
              </a>
            </li>
            <li *ngFor="let menu of menus['children'];let idx = index" [class.active] = menu.active
                [ngStyle]="{display: menus['head'][menu.path]}">
              <a (click)="selectMenu(2,idx)"  class="auto">
                  <span class="pull-right text-muted" *ngIf="!asideFolded">
                    <i class="fa fa-fw fa-angle-right text"></i>
                    <i class="fa fa-fw fa-angle-down text-active"></i>
                  </span>
                <i class="{{menu.cls}}"></i>
                <span *ngIf="!asideFolded">{{menu.title}}</span>
              </a>
              <ul class="nav nav-sub dk">
                <li class="nav-sub-header">
                  <a>
                    <span>{{menu.title}}</span>
                  </a>
                </li>

                <li *ngFor="let func of menu['children']" routerLinkActive="active"
                    [ngStyle]="{display: menus['head'][func.path]}">
                  <a [routerLink]="[menu.path+'/'+func.path]" *ngIf="func.path!='monitorcenter'">
                    <span>{{func.title}}</span>
                  </a>
                  <a [routerLink]="['../access/'+func.path]" *ngIf="func.path=='monitorcenter'"
                     [ngStyle]="{display: menus['head'][func.path]}" target="_blank">
                    <span>{{func.title}}</span>
                  </a>
                </li>

              </ul>
            </li>



          </ul>
        </nav>
      </div>
    </div>
  </div>

  <div class="app-content">
    <div class="app-content-body fade-in-up">
      <router-outlet></router-outlet>
    </div>
  </div>

</div>

